<template>
  <div class="basic-box">
    <div class="basic-body">
      <div class="basic-body-left" v-show="showLeft">
        <!-- 标题 -->
        <span class="section-name">控制断面名称</span>
        <!-- 断面 -->
        <div class="setion-box">
          <span
            :class="['section-item', flag === index ? 'active' : '']"
            v-for="(item, index) in state.sectionArr"
            :key="index"
            @click="clickSection(item, index)"
          >
            <span
              :class="[
                'section-title',
                item.status == 1 && flag === index
                  ? 'status-active'
                  : item.status == 1 && flag !== index
                  ? 'status'
                  : ''
              ]"
            >
              <el-tooltip :content="item.blknm" placement="top" :disabled="item.blknm.length < 8">
                <span> {{ item.blknm }}</span>
              </el-tooltip>
            </span>

            <span @click="updateSection(item, index)">
              <el-icon :size="size" :color="color">
                <Edit />
              </el-icon>
            </span>
          </span>
        </div>
      </div>
      <div class="basic-body-right">
        <el-tabs v-model="activeName" type="border-card" class="demo-tabs" @tab-click="handleClick">
          <el-tab-pane label="区域计算方案" name="first">
            <div class="basic-show">
              <!-- 区域计算方案 -->
              <UnitName ref="unitName" />
            </div>
          </el-tab-pane>
          <el-tab-pane label="场次信息" name="second">
            <div class="basic-show">
              <SessionsInfo ref="sesInfo" />
            </div>
          </el-tab-pane>
          <el-tab-pane label="计算结果" name="third" :lazy="true">
            <div class="basic-show">
              <CountResult :tabsId="tabsId" v-if="activeName == 'third'" />
            </div>
          </el-tab-pane>
          <el-tab-pane label="分析结果" name="fourth">
            <div class="basic-show">
              <AssessResult ref="asesRes" />
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <div class="detail-footer" v-show="showLeft">
      <div class="btn-group">
        <div class="save-publish" @click="savePublishScheme">
          <span>发布</span>
        </div>
        <div class="btn-delete" @click="deleteScheme">
          <span>删除</span>
        </div>
      </div>
    </div>
  </div>
  <!-- 方案流程 -->
  <PublishModel ref="publicRef" />
</template>
<script setup>
import { ref, reactive, onMounted, watch } from 'vue'
import emitter from '@/utils/bus'
import UnitName from '@/pages/ComputeMethods/cpns/SchemeDetail/cpns/UnitName.vue'
import SessionsInfo from '@/pages/ComputeMethods/cpns/SchemeDetail/cpns/SessionsInfo.vue'
import CountResult from '@/pages/ComputeMethods/cpns/SchemeDetail/cpns/CountResult.vue'
import AssessResult from '@/pages/ComputeMethods/cpns/SchemeDetail/cpns/AssessResult.vue'
import PublishModel from '@/pages/ComputeMethods/cpns/SchemeModel/cpns/PublishModel/Index.vue'
//api
import {
  getSectionSchemeInfos,
  getSchemeSectionStatus,
  updateCalculationSchemePulish
} from '@/services/modules/compute-methods'
import { useComputeMethods, useSectionInfo } from '@/store/modules/compute-methods.js'
import { ElMessage } from 'element-plus'
//流程ref
const publicRef = ref(null)
const flag = ref(0)
const activeName = ref('first')
const unitName = ref(null)
const sesInfo = ref(null)
const countRes = ref(null)
const asesRes = ref(null)
const state = reactive({
  sectionArr: []
})
// 父传子ID
const tabsId = ref('')
//
const props = defineProps({
  showBtn: {
    type: Boolean,
    default: false
  },
  showLeft: {
    type: Boolean,
    default: true
  },
  schemeData: {
    type: Array,
    default: []
  }
})
const showLeft = ref(props.showLeft)
const updateSection = (obj, index) => {
  getSectionSchemeInfos({ blkcd: obj.blkcd }).then((res) => {
    if (res.code === 200) {
      unitName.value.changeData(res.data)
    }
  })

  publicRef.value.openDialog(obj.blkcd)
  flag.value = index
  // unitName.value.changeData(obj.blkcd, obj.blknm)
  sesInfo.value.changeData(obj.blkcd, obj.blknm)
  // countRes.value.changeData(obj.blkcd, obj.blknm)
  tabsId.value = obj.blkcd
  asesRes.value.changeData(obj.blkcd, obj.blknm)
}
const clickSection = (obj, index) => {
  getSectionSchemeInfos({ blkcd: obj.blkcd }).then((res) => {
    if (res.code === 200) {
      unitName.value.changeData(res.data)
    }
  })
  flag.value = index // unitName.value.changeData(obj.blkcd, obj.blknm)
  sesInfo.value.changeData(obj.blkcd, obj.blknm)
  // countRes.value.changeData(obj.blkcd, obj.blknm)
  tabsId.value = obj.blkcd
  asesRes.value.changeData(obj.blkcd, obj.blknm)
  emitter.emit('fixedPosition', obj)
}
//保存并发布
function savePublishScheme() {
  getSchemeSectionStatus({
    schemeCode: useComputeMethods().schemeInfo.schemeCode,
    blkcd: useComputeMethods().schemeInfo.endSection
  }).then((res) => {
    if (res.code === 200) {
      let result = res.data.every((item) => {
        return item.status === 1
      })
      if (result) {
        updateCalculationSchemePulish({
          schemeCode: useComputeMethods().schemeInfo.schemeCode
        }).then((res) => {
          if (res.code === 200) {
            ElMessage({
              message: '发布成功',
              type: 'success'
            })
            emitter.emit('closePage', false)
          }
        })
      } else {
        ElMessage({
          message: '部分断面未配置,请配置完发布',
          type: 'error'
        })
      }
    }
  })
}
//删除方案
function deleteScheme() {}
//
function initData() {
  //
  getSchemeSectionStatus({
    schemeCode: useComputeMethods().schemeInfo.schemeCode,
    blkcd: useComputeMethods().schemeInfo.endSection
  }).then((res) => {
    if (res.code === 200) {
      state.sectionArr = res.data
      // if (state.sectionArr.length > 0) clickSection(state.sectionArr[0], 0)
    }
  })
}
//订阅
const subscribe = useComputeMethods().$subscribe(
  (mutation, state) => {
    initData()
  },
  { detached: false }
)
watch(
  () => props.schemeData,
  () => {
    if (props.schemeData.length > 0) {
      unitName.value.changeData(props.schemeData)
    } else {
    }
  }
)
onMounted(() => {
  // initData()
})
</script>
<style lang="less" scoped>
.basic-box {
  width: 100%;
  height: calc(100% - 225px);
  display: flex;
  flex: 1;
  justify-content: space-between;
  flex-direction: column;
  overflow: hidden;
  .basic-body {
    width: 100%;
    flex: 1;
    overflow: hidden;
    display: flex;
    padding: 0px 0px 10px 0px;
    justify-content: space-between;
    box-sizing: border-box;
    font-size: var(--content-fontsize);
    .basic-body-left {
      height: 100%;
      width: 20%;
      background-color: #d7d4d427;
      font-size: var(--content-fontsize);
      .section-name {
        display: block;
        height: 35px;
        background-color: #f2f2f2;
        text-align: center;
        line-height: 35px;
        font-weight: 600;
      }
      .setion-box {
        height: calc(100% - 40px);
        overflow-y: auto;

        .section-item {
          display: block;
          height: 30px;
          text-align: center;
          line-height: 30px;
          box-sizing: border-box;
          padding: 0 12px;
          cursor: pointer;
          display: flex;
          justify-content: space-between;
          &.active {
            color: #0154db;
          }
          .section-title {
            display: block;
            width: 80px;
            display: flex;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;

            &.status {
              color: gray;
            }
            &.status-active {
              color: 0154db;
            }
          }
        }
        .section-item:hover {
          color: #0154db;
        }
      }
    }
    .basic-body-right {
      flex: 1;
      height: 100%;
      // width: 78%;
      overflow: hidden;
      :deep(.el-tabs) {
        height: 100%;
        box-sizing: border-box;
        .el-tabs__content {
          height: calc(100% - 55px);
          .el-tab-pane {
            height: 100%;
            .basic-show {
              height: 100%;
            }
          }
        }
      }
    }
  }
  .detail-footer {
    width: 100%;
    height: 40px;
    bottom: 20px;
    .btn-group {
      width: 100%;
      display: flex;
      justify-content: space-around;
      .btn-save {
        width: 120px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 25px;
        background: #149bd5;
        cursor: pointer;
        span {
          color: white;
        }
      }
      .save-publish {
        width: 120px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 25px;
        background: #0154db;
        cursor: pointer;
        span {
          color: white;
        }
      }
      .btn-delete {
        width: 120px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 25px;
        background: #d9011b;
        cursor: pointer;
        span {
          color: white;
        }
      }
    }
  }
}
</style>
